<template>
	<view class="page">
		<view class="list-item" v-for="(item,index) in users" :key="index">
			<view class="avatar">
				<!-- <text class="round" v-if="item.read"></text> -->
				<image :src="`http://localhost:8080${item.avatar}`" mode="widthFix"></image>
			</view>
			<view class="content" @click="goToFriendDetail(item)">
				<view class="title">
					<text class="name">{{ item.nickName }}</text>
					<!-- <text class="time">{{ item.time }}</text> -->
					<button class="chat-button" @click="connect(item)">发起聊天</button>

				</view>
				<!-- <view class="txt">{{ item.msg }}</view> -->
			</view>

		</view>
	</view>
</template>

<script>
	import {
		getFollowUser
	} from '@/api/my/crony.js'

	export default {
		data() {
			return {
				options: [{
					text: '取消',
					style: {
						backgroundColor: '#007aff'
					}
				}, {
					text: '确认',
					style: {
						backgroundColor: '#dd524d'
					}
				}],
				users: []
			};
		},

		mounted() {
			this.queryFollowUser();
		},
		methods: {

			// 点击跳转到好友详情
			goToFriendDetail(item) {
				uni.navigateTo({
					url: `/pages/my/detailPages?item=${encodeURIComponent(JSON.stringify(item))}`
				});
			},


			queryFollowUser() {
				getFollowUser().then((res) => {
						this.users = res.data
						console.log(this.users);
					})
					.catch((error) => {

					})
			},
			onClick(e) {
				console.log('点击了' + (e.position === 'left' ? '左侧' : '右侧') + e.content.text + '按钮')
			},
			swipeChange(e, index) {
				console.log('当前状态：' + e + '，下标：' + index)
			},
			connect(item) {
				uni.navigateTo({
					url: `/pages/message/chat?name=${item.nickName}&avatar=${item.avatar}&userId=${item.followedId}`
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page {
		padding: 0 32rpx;
		color: #333;
	}

	.list-item {
		display: flex;
		padding: 30rpx 0;
		border-bottom: 1px solid #ccced3;

		.avatar {
			width: 90rpx;
			height: 90rpx;
			border-radius: 10rpx;
			margin-right: 20rpx;
			position: relative;

			.round {
				position: absolute;
				width: 14rpx;
				height: 14rpx;
				border-radius: 50%;
				background: #ef5656;
				top: -4rpx;
				right: -4rpx;
				z-index: 1;
			}

			image {
				width: 100%;
				height: 100%;
				border-radius: 10rpx;
			}
		}

		.content {
			flex: 1;

			.title {
				display: flex;
				justify-content: space-between;

				.name {
					margin-left: 20px;
					margin-top: 5px;
					font-weight: bold;
				}

				.time {
					color: #999;
					font-size: 24rpx;
				}
			}

			.txt {
				margin-top: 10rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 1;
				-webkit-box-orient: vertical;
				text-align: left;
				color: #999;
				font-size: 26rpx;
			}
		}

		.chat-button {
			width: 90px;
			height: 40px;
			margin-right: 1px;
			padding: 10px 20px;
			background-color: #000000;
			/* 按钮背景色 */
			color: white;
			/* 文字颜色 */
			border: none;
			/* 去掉边框 */
			border-radius: 5px;
			/* 圆角效果 */
			font-size: 12px;
			cursor: pointer;
			/* 鼠标悬停时显示为手型 */
			display: inline-flex;
			/* 使用flex布局 */
			justify-content: center;
			/* 水平居中 */
			align-items: center;
			/* 垂直居中 */
			width: auto;
			/* 根据内容宽度自适应 */
			transition: background-color 0.3s;
		}

		.chat-button:hover {
			background-color: #005bb5;
			/* 鼠标悬停时改变背景色 */
		}

	}
</style>